<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件求和为:{{ sum }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="addPerson"> 添加</button>

   <ul v-for="item in personList" :key="item.id">{{ item.name}}</ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
import { mapState} from 'vuex';
export default {
  name: "Person",
  data() {
    return {
      name:""
    }
  },
  computed: {
    ...mapState(["personList","sum"])
  },
  methods:{
    addPerson(){
      const person ={id:nanoid(),name:this.name} 
      this.$store.commit("ADD_PERSON",person)
      this.name=""
    }
  }
};
</script>
<style scoped>
button {
  margin-left: 10px;
}
</style>
